<script lang="tsx" setup>
import { SuitForm, SuitFormConfig } from '@suit/front-base-components-v3'
import { ElInput, FormInstance } from 'element-plus'
import { ref } from 'vue'

type A = InstanceType<typeof ElInput>['onChange']
const formRef = ref<
  FormInstance & {
    updateFormItem: (prop: string, _: Record<string, SuitFormConfig>) => void
  }
>()
const config = ref<SuitFormConfig[]>([
  {
    tag: 'el-input',
    prop: 'name',
    span: 12,
    hide: false,
    br: true,
    label: '姓名',
    placeholder: '请选择姓名',

    viewLabelRender() {
      return <div style="background:yellow">test</div>
    },

    isView: true,
    viewFilter({ modelValue }) {
      return 'zhujun viewFilter'
    },
  },
  {
    tag: 'el-input',
    prop: 'name2',
    span: 12,

    br: true,
    required: true,
    rules: [
      {
        required: true,
        message: '不能为空',
      },
    ],
    label: '姓名',
    placeholder: '请选择姓名',
    isView: false,
    onInput(info: string) {
      formRef.value!.updateFormItem('name1', {
        viewRender() {
          return <div>{info}</div>
        },
      })
    },
  },
  {
    tag: 'el-input',
    prop: 'name3',
    span: 12,
    br: true,
    label: '姓名',
    placeholder: '请选择姓名',
    isView: true,
  },
  {
    tag: 'el-input',
    prop: 'name1',
    span: 12,
    // br: true,
    label: '姓名1',
    placeholder: '请选择姓名1',
    // isView: true,
    viewRender() {
      return <div>hhlow rodl</div>
    },
    'onUpdate:modelValue'(e) {
      debugger
      console.log(e)
    },
    onInput(e) {
      debugger
      console.log(e)
    },
  },
  {
    tag: 'suit-dict-select',
    prop: 'sex',
    label: '性别',
    br: true,
    // isView: true,
    code: 'sex_type',
    placeholder: '请选择性别',
    // render() {
    //   return <span>hello zhujun</span>
    // },
    'onUpdate:modelValue'(e) {
      debugger
      console.log(e)
    },
  },
  {
    tag: 'el-input',
    type: 'textarea',
    prop: 'remark',
    label: '介绍',
    span: 24,
    placeholder: '请输入介绍',
  },
])
const form = ref({
  name: '111111',
  name1: 'zhujun',
})

setTimeout(() => {
  form.value.name = 'xxxxxzzzz'
  console.log('change')
}, 3000)

let hide = false
const validate = () => {
  // formRef.value?.validate(valid=>{
  //   debugger
  //   console.log(valid)
  // })
  hide = !hide
  formRef.value!.updateFormItem('name', {
    viewRender() {
      return <div> 我的更新渲染 {hide ? '1' : '2'}</div>
    },
  })
}

const setHide = () => {
  hide = !hide
  formRef.value!.updateFormItem('name', { hide })
}
</script>
<template>
  <div>
    <SuitForm :config="config" ref="formRef" :model="form" />

    <el-button @click="validate"> 验证</el-button>
    <el-button @click="setHide"> 显隐</el-button>
  </div>
</template>
<style lang="scss" scoped></style>
